<template>
    <div v-loading="loading">
        <el-form :inline="true" :model="searchForm" size="mini">
            <div class="search-common">
                <el-row :gutter="10">
                    <el-col :sm="24" :lg="24" :xs="24">
                        <el-form-item>
                            <el-button type="primary" @click="addUserItem">添加</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mt10">
                    <el-form-item label="角色">
                        <el-select placeholder="" v-model="searchForm.roles">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="item in allRoles" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-popover placement="bottom" width="200" trigger="click">
                            <el-tree :data="allDepate" @node-click="clickItemTree" node-key="id" :accordion="true" ref="tree" highlight-current :props="defaultProps">
                            </el-tree>
                            <el-button slot="reference">{{this.chooseText.name}}</el-button>
                        </el-popover>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input auto-complete="off" v-model="searchForm.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="searchUser">查询</el-button>
                    </el-form-item>
                </el-row>
            </div>
        </el-form>
        <div class="pl20 pr20 mt10" style="background:#fff">
            <br/>
            <el-table :data="tableData" :stripe="true" border size="mini">
                <el-table-column prop="user_no" width="150" label="员工编号">
                </el-table-column>
                <el-table-column prop="account" width="180" label="登录帐号">
                </el-table-column>
                <el-table-column prop="name" width="250" label="姓名">
                </el-table-column>
                <el-table-column prop="deptName" width="150" label="部门">
                </el-table-column>
                <el-table-column label="性别" width="150">
                    <template slot-scope="scope">
                        {{scope.row.sex==0?'男':'女'}}
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" width="150" label="手机号码">
                </el-table-column>
                <el-table-column prop="roleName" width="250" label="角色">
                </el-table-column>
                <el-table-column label="状态" width="150">
                    <template slot-scope="scope">
                        {{scope.row.status==0?'禁用':'启用'}}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="150">
                  
                    <template slot-scope="scope">
                        <el-button @click="editHandleClick(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="mini" @click="deleteHandleClick(scope.row.id,scope.$index)">删除</el-button>
                        <el-button type="text" size="mini" @click="resetPasswordClick(scope.row.id)">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
        

            <page-pagination 
      v-on:pageFun="pageFunNumber" 
      :page="page" 
      :pageSize="pageSize" 
      :total="total">
    </page-pagination>

        </div>
        <add-diglog :title="title" :edit-data="user_dialog" :role-dialog="roleDialog" @addAndClick="addAndEditMenu" @cancelAndClick="cancelDialog"></add-diglog>
    </div>

</template>
<script>
import pagePagination from "@/components/Common/pagePagination";
import { mapGetters } from "vuex";
import server from "@/service/index_c";
import addDiglog from "./add";
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      roleDialog: false,
      isSearch: true,
      isAdd: true,
      title:'添加',
      tableData: [],
      user_dialog:{
            chooseText: { name: "选择部门",id:'' }
      },
      chooseText: { name: "选择部门" },
      searchForm: {
        roles: "",
        depate: "",
        name: ""
      },
      defaultProps: {
        children: "childList",
        label: "name"
      }
    };
  },
  computed: {
    ...mapGetters({
      allMenu: "getAllMenu",
      allDepate: "getAllDepatement",
      allRoles: "getAllRolesList"
    })
  },
  created(){
    this.$store.dispatch("setRolesList");
     this.$store.dispatch("setAllDepatement");
  },
  mounted() {
    this.queryUserList();
    
  },
  methods: {
    //选择部门
    clickItemTree(item) {
      if (this.isSearch) {
        this.chooseText = item;
      } else {
        this.user_dialog.chooseText = item;
        this.user_dialog.user_depate = item.id;
      }
    },
    addUserItem() {
      this.isAdd = true;
      this.roleDialog = true;
      this.isSearch = false;
       this.title='添加';
      this.user_dialog = {
        user_id: "",
        user_name: "",
        user_account: "",
        user_number: "",
        user_phone: "",
        user_sex: "0",
        user_depate: "",
        user_role: "",
        user_status: "1",
        chooseText: { name: "选择部门",id:'' }
      };
    },
    addAndEditMenu(params,formName) {

      if (this.isAdd) {
        this.addHandleClick(params, formName);
      } else {
        params.id = this.user_dialog.user_id;
        this.editUserItemSubmit(params, formName);
      }
    },
    cancelDialog({bool,isSearch}) {
      this.roleDialog = bool;
      this.isSearch = isSearch;
    },
    //修改
    async editUserItemSubmit(params) {
      let res = await server.haiheiServerEditUserItem(params);
      if (res.success) {
        this.$message({
          type: "success",
          message: res.msg
        });
        // this.$refs[formName].resetFields();
        this.roleDialog = false;
        this.queryUserList();
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },

    // 添加
    async addHandleClick(params, formName) {
      let res = await server.haiheiServerAddUserItem(params);
      if (res.success) {
        this.$message({
          type: "success",
          message: res.msg
        });
      
        this.roleDialog = false;
        this.queryUserList();
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },

    // 重置密码
    resetPasswordClick(id) {
      this.$confirm("您确定要重置 该条数据密码吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false
      })
        .then(() => {
          server.haiheiServerResetUserPassword({ id: id }).then(res => {
            if (res.success) {
              this.$message({
                type: "success",
                message: res.msg
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {});
    },

    //修改弹框
    editHandleClick(item) {
      this.isAdd = false;
      this.roleDialog = true;
      this.isSearch = false;
      this.title='编辑';
      this.user_dialog = {
        user_id: item.id,
        user_name: item.name,
        user_account: item.account,
        user_number: item.user_no,
        user_phone: item.mobile,
        user_sex: item.sex + "",
        user_depate: "",
        user_role: item.role_id,
        user_status: item.status,
        chooseText: { name: item.deptName, id: item.dept_id }
      };
    },

    // 删除
    deleteHandleClick(id, index) {
      this.$confirm("您确定删除该条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false
      })
        .then(() => {
          this.removeRolesItem(id, index);
        })
        .catch(() => {});
    },
    pageFunNumber(page) {
      this.queryUserList(page);
    },
    //删除
    async removeRolesItem(id, index) {
      let res = await server.haiheiServerDeleteUserItem({ id: id });
      if (res.success) {
        this.queryUserList();
        this.$message({
          type: "success",
          message: res.msg
        });
        this.roleDialog = false;
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    async queryUserList(page = 1) {
      let params = {
        role_id: this.searchForm.roles,
        dept_id: this.chooseText.id,
        name: this.searchForm.name,
        page: page,
        pageSize: this.pageSize
      };
    //  console.log(params);
      let res = await server.haiheiServerUserList(params);
      if (res.success) {
        this.tableData = res.result.pageList;
        this.total = res.result.nums;
        this.page = res.result.page;
        this.pageSize = res.result.pageSize;
      }
    },
    searchUser() {
      this.queryUserList();
    }
  },
  components: {
    addDiglog,
    pagePagination
  }
};
</script>

